<template>

	<view class="u-p-l-20 u-p-r-20 u-p-t-25">
		<view class="itemBox " v-for="(item,index) in list" :key="index">
			<view class=" u-flex u-row-between u-p-b-18">
				<view class="u-font-30 fw-large u-flex u-row-center  "><u-avatar
						:src="item.avatar"></u-avatar>{{item.nickName}}</view>
				<u-icon @click="editFun(item)" label-pos="left" label="编辑" color="#9b9ba3" label-color="#9b9ba3"
					size="22" name="arrow-right"></u-icon>
			</view>
			<view class="desctions">
				<view>手机号:{{item.phone}}</view>
				<view>性别:{{item.sex==1?'男':'女'}}</view>
			</view>
		</view>
	</view>



	<!-- <view class="main">

		<view @click="freeTell(item)" class="item u-flex u-m-b-28  animate__animated animate__bounceInUp"
			v-for="(item,index) in list" :key="index">
			<u-avatar src=""></u-avatar>
			<view class="name u-flex-1 u-font-xl u-m-l-22">{{item.fullName}}</view>
			<view class="call">
				<u-icon name="phone-fill" color="#ffc300" labelColor="#ffc300" :label="item.phone"></u-icon>
			</view>
		</view>
	</view>

	-->

	<u-empty v-if="list.length===0" text="暂无服务员"></u-empty>



	<view @click="addFn" class="submitBottom">添加服务员</view>


</template>

<script setup lang="ts">
	import { onReady, onShow,onReachBottom } from '@dcloudio/uni-app'
	import * as indexHooks from '@/hooks/index'
	import waitersApi from '@/api/waiters'
	import { computed, reactive, ref, watch,unref } from "vue";

	onShow(() => {
		getList()
	})

	const show = ref(false)

	const list = ref([])
	const params = {
		pageNo:1,
		pageSize:20
	}
	let totalPage = 1
	// const form = reactive({
	// 	waiterType: 1,
	// 	userName: '',
	// 	fullName: '',
	// 	nickName: '',
	// 	phone: '',
	// 	departId: '',
	// 	sex: 1
	// })



	function editFun(item) {
		uni.$u.route({
			url: '/subpackage/my/waiters/edit',
			params: {
				waiterId:item.waiterId,
				update:true
			}
		})
	}

	function addFn() {
		uni.navigateTo({
			url: '/subpackage/my/waiters/edit'
		})
	}

	const getList = () => {
		waitersApi.getWaiter(params).then(({data}) => {
			totalPage = data.totalPage
			list.value = params.pageNo==1?data.list:unref(list).concat(data.list)
		})
	}

	const freeTell = (item) => {
		uni.makePhoneCall({
			phoneNumber: item.phone,

		})
	}

	watch(show, (newVal) => {
		if (newVal) {
			getBusiness()
		}
	})
	onReachBottom(()=>{
		if(totalPage<=params.pageNo) return
		params.pageNo++
		getList()
		// params.
	})
</script>

<style lang="scss" scoped>
	.itemBox {
		background-color: #ffffff;
		border-radius: 12upx;
		padding: 26upx 12upx 26upx;
		box-shadow: 4upx 8upx 16upx rgba(0, 0, 0, .1);
		margin-bottom: 26upx;

		.desctions {
			font-size: 26upx;
			color: #9b9ba3;
			line-height: 1.8;
			padding: 0 24upx 5upx;
		}
	}

	.main {
		padding: 30upx 28upx 0;

		.item {
			background-color: white;
			box-shadow: 0 8upx 16upx rgba(52, 231, 228, .2);
			padding: 24upx;
			border-radius: 18upx;

			.name {
				color: #00d8d6;
				font-weight: 600;
			}
		}

		.items {
			background-color: white;
			margin-bottom: 30upx;
			padding: 20upx;
			border-radius: 20upx;
			color: #130f40;

			>view {
				line-height: 1.8em;
				font-size: 26upx;

				>text {
					color: #f5f5f5;
					margin-right: 18upx;
				}
			}
		}
	}
</style>
